<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
    .center{
        width: 300px;
        height: 40px;
        margin: 100px auto;
        display: flex;
        justify-content: center;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
    }
    .div-left{
        width: 148px;
        height: 40px;
        background-color: orchid;
        
    }
    .div-right{
        width: 148px;
        height: 40px;
        background-color: lightcoral;
        position: relative;
    }
    .div-right>section{
        position: absolute;
          display: none;  
    }
    .div-right>section>div{
        width: 146px;
        border: 0.5px solid black; 
    }
    </style>
</head>
<body>
    <div class="center">
        <div class="div-left">选择项目:</div>
        <div class="div-right">
            <div class="right">未选择</div>
            <section>
                <div>html5</div>
                <div>css3</div>
                <div>javascript</div>
                <div>jquery</div>
            </section>
        </div>
    </div>
    <script src="./jquery.js"></script>
</body>
</html>
<script>
    $(' .right').click(function(){
        $('section').css('display','block')
    })
    var divs = document.querySelectorAll('section>div');
      $(divs).each(function(){
          $(divs).hover(function(){
              $(this).css('background-color','lightcoral')
              .siblings().css('background-color','white');
          })
      })
        
      $(divs).each(function(){
            $(divs).on('click',function(){
                 $(this).parents('section').prev().html($(this).html()).next().css('display','none');
          })
      })
</script>